<template>
	<!--通讯录-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 搜索 + 导航 +弹框 -->
			<w-sel-search topType="three" ref="navTab" :is_tip="true" :is_r_i="true"
				@tosearch="tosearch" @toadd="toadd" @tolink="tolink" @changeTab="changeTab">
			</w-sel-search>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper class="page-body" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(item,index) in objlist" :key="index">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation
					:scroll-into-view="toView">
					<template v-if="item && item.length > 0 ">
						<!--通讯列表-->
						<template v-if="index === 0">
							<w-phones :phones="item" @paramClick="paramClick" :is_shrink="is_shrink" :leftNavAdd="true"
								@leftAdd="leftAdd('tip')" @todetail="todetail"></w-phones>
						</template>
						<template v-else-if="index === 1">
							<w-phones :phones="item" @paramClick="paramClick" :is_shrink="is_shrink" :leftNavAdd="true"
								@leftAdd="leftAdd('tip')" @todetail="todetail"></w-phones>
						</template>
					</template>
					<!--无数据-->
					<empty v-else no-full type="noData"></empty>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!--左侧导航隐藏按钮-->
		<view class="page-button" @click="navShow(is_shrink)">
			<image class="page-button-icon" :src="$mAssetsPath.icon_xianxing"></image>
		</view>
		<!--弹窗-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit">编辑</view>
				<view class="w-con">
					<view class="input-row">
						<input class="input-row-w" type="text" v-model="searchVal" placeholder="请输入编辑内容"
							confirm-type="search" placeholder-style="color:#999"></input>
						<image class="icon-tb3" v-if="searchVal!=''" @click.stop="clear"
							:src="$mAssetsPath.icon_qingchu"></image>
					</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
	</view>
</template>
<script>
	const util = require('../../common/util2.js');
	import wPopup from '@/components/w-popup/w-popup2.vue'; //弹窗
	import wSelSearch from '@/components/w-sel-logo/w-sel-search.vue'; //标题+导航+搜索
	import wPhones from '@/components/w-phones/phone-directory.vue'; //通讯列表
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getMailLists, //通讯录列表
		getGroupLists, //分组列表
		addGroups, //分组添加
	} from '@/common/api.js';
	export default {
		name: "phones",
		components: {
			wSelSearch,
			wPhones,
			wPopup
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo','userRole']),
		},
		data() {
			return {
				userType: 'c', //c-公司 d-供应商
				searchVal: '', //编辑
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				is_shrink: false,
				objlist: [[]],
				//powerStatu:false, //修改权限管理
				//groupStatu:false, //修改分组权限
				//memberStatu:false,//成员管理权限

				noData: false,
				toView: '', //回到顶部id
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1], //第几个swiper的第几页
				params: {
					company_id: '',
					type: '',
					nickname: '',
				},
				params2: {
					company_id: '',
					type: '',
					name: '',
				}
			}
		},
		onShow() {
			this.params.company_id = this.companyInfo.id;
			this.params2.company_id = this.companyInfo.id;
			//this.memberStatu = this.$power.power('memberStatu'); //成员管理
			//this.groupStatu = this.$power.power('groupStatu'); //组别管理
			
			/* if(this.userInfo.type === 0){ //判断
				this.groupStatu = true;
				this.memberStatu = true;
			}else if(this.userInfo.role_arr && this.userInfo.role_arr.length>0){
				this.userInfo.role_arr.forEach(item=>{
					if(item === 13){
						this.memberStatu = true;
					}
					if(item === 14){
						this.groupStatu = true;
					}
				})
			} */
			this.getdata();
		},
		methods: {
			resdata() {
				this.getdata();
			},
			//获取通讯录列表
			getdata() {
				if (this.currentTab === 0) {
					this.params.type = 1; //员工
					//获取分组
					getGroupLists({
						company_id: this.params.company_id,
						type: 1
					}).then(res => {
						if (res.code === 2000) {
							let objlist = [{
								id:0,
								name:'公司成员'
							}]
							if(res.data && res.data.length>0){
								res.data.forEach(ite=>{
									objlist.push(ite)
								})
							}
							getMailLists(this.params).then(res2 => {
								if (res2.code === 2000) {
									let list = res2.data;
									if (objlist && objlist.length > 0) {
										objlist.forEach(item => {
											let pho = []
											this.$set(item,'pho',Array)
											this.$set(item,'no','a'+item.id)
											if (list && list.length > 0) {
												list.forEach(item2 => {
													if (item2.group_id === item.id) {
														pho.push(item2)
													}else if(item2.group_id == null && item.id===0){
														pho.push(item2)
													}
												})
											}
											item.pho = pho;
										})
									}
									this.objlist[this.currentTab] = objlist;
									this.$forceUpdate() //二维数组，开启强制渲染
									console.log(222222, this.objlist)
								}
							})
						}
					})

				} else if (this.currentTab === 1) {
					this.params.type = 2; //供应商
					//获取分组
					getGroupLists({
						company_id: this.params.company_id,
						type: 2
					}).then(res => {
						if (res.code === 2000) {
							let objlist = [{
								id:0,
								name:'待分组'
							}]
							if(res.data && res.data.length>0){
								res.data.forEach(ite=>{
									objlist.push(ite)
								})
							}
							getMailLists(this.params).then(res2 => {
								if (res2.code === 2000) {
									let list = res2.data;
									if (objlist && objlist.length > 0) {
										objlist.forEach(item => {
											let pho = []
											this.$set(item,'pho',Array)
											this.$set(item,'no','a'+item.id)
											if (list && list.length > 0) {
												list.forEach(item2 => {
													if (item2.group_id === item.id) {
														pho.push(item2)
													}else if(item2.group_id == null && item.id===0){
														pho.push(item2)
													}
												})
											}
											item.pho = pho;
										})
									}
									this.objlist[this.currentTab] = objlist;
									this.$forceUpdate() //二维数组，开启强制渲染
									console.log(222222, this.objlist)
								}
							})
						}
					})
				}
			},
			confirm() {
				if (this.currentTab === 0) {
					this.params2.name = this.searchVal;
					this.params2.type = 1;
					
				}else if(this.currentTab === 1){
					this.params2.type = 2;
					this.params2.name = this.searchVal;
					
				}
				addGroups(this.params2).then(res => {
					if (res.code === 2000) {
						uni.showToast({
							title: '新增成功！',
							icon: 'none',
							duration: 2000
						})
						this.getdata();
					}
				})
				this.showtip = false;

			},
			//弹窗跳转
			tolink(type) {
				if(this.userRole.memberStatu || this.userInfo.type === 0){
					if (type === 'a') {
						uni.navigateTo({
							url: `/pages/contact/contactInvite?type=${this.currentTab=== 0?'c':'d'}`
						})
					} else if (type === 'b') {
						uni.navigateTo({
							url: `/pages/contact/contactSearch?type=${this.currentTab}`
						})
					}
				}else{
					uni.showToast({
						title:'暂无权限！',
						icon:'none',
						duration:2000
					})
				}
				if(this.userRole.groupStatu || this.userInfo.type === 0){
					if (type === 'c') {
						uni.navigateTo({
							url: `/pages/contact/editTeams?type=${type}`
						})
					} else if (type === 'd') {
						uni.navigateTo({
							url: `/pages/contact/editTeams?type=${type}`
						})
					}
				}else{
					uni.showToast({
						title:'暂无权限！',
						icon:'none',
						duration:2000
					})
				}
				
				
			},
			//增加左侧导航
			leftAdd(type) {
				this['show' + type] = true;
				this.content1 = 'center';
				this.type1 = 'center';
				this.searchVal = '';
			},
			//左侧导航收缩
			navShow(is_shrink) {
				console.log(111, is_shrink)
				this.is_shrink = !is_shrink
			},
			paramClick(e) {
				console.log(121, e)
			},
			//增加弹窗
			toadd(type) {
				this['show' + type] = true;
				this.content1 = 'center';
				this.type1 = 'top';
			},
			//跳转详细页
			todetail(uid) {
				uni.navigateTo({
					url: `/pages/contact/contactDetailInfo?id=${uid}&userType=${this.userType}`
				})
			},
			//跳转搜索页面
			tosearch() {
				uni.navigateTo({
					url: `/pages/message/messageSearch?pageType=search`
				})
			},
			change1(e) {
				console.log(233, e)
				if (!e.show) {
					this.showtip = false
					this.showshare = false
				}
			},
			//取消
			cancel(type) {
				this['show' + type] = false
			},
			//清空
			clear() {
				this.searchVal = '';
			},
			changeTab(index) {
				console.log(1234,index)
				this.currentTab = index;
				if (this.currentTab === 0) {
					this.userType = 'c'
				} else if (this.currentTab === 1) {
					this.userType = 'd'
					this.getdata();
				}
			},
			// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
			isRequest() {
				return new Promise((resolve, reject) => {
					this.pages[this.currentTab]++
					var that = this
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
						})
						let newData = ['新数据1', '新数据2', '新数据3']
						resolve(newData)
					}, 1000)
				})
			},
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
				if (this.currentTab === 0) {
					this.userType = 'c'
				} else if (this.currentTab === 1) {
					this.userType = 'd'
				}
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {
				console.log(`加载${this.currentTab}`) //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.isRequest().then((res) => {
					let tempList = this.objlist
					tempList[this.currentTab] = tempList[this.currentTab].concat(res)
					console.log(tempList)
					this.objlist = tempList
					this.$forceUpdate() //二维数组，开启强制渲染
				})
			}, 300),
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			isRefresh() {
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					this.$refs.refresh.endAfter() //刷新结束调用
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 80vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;

		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}

		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;

			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}

			.w-but-txt:last-of-type {
				border-right: none;
			}
		}

		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 60rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;

				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}

				.input-row-w {
					padding-left: 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
					width: calc(100% - 74rpx);
				}
			}
		}
	}

	/* 提示窗口 */
	.w-tip2 {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 290rpx;
		border-radius: 10rpx;
		background-color: #fff;
		overflow: hidden;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 80rpx auto;

		.w-con {
			display: flex;
			flex-direction: column;
			text-align: center;
			font-weight: 400;
			border-bottom: 1rpx solid #f5f5f5;
			padding: 0 30rpx;

			.w-con-box {
				display: flex;
				align-items: center;
				height: 100rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.box-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 30rpx;
				}

				.box-txt {
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-3;
				}
			}

			.w-con-box:last-of-type {
				border-bottom: none;
			}
		}
	}

	.page-button {
		width: 80rpx;
		height: 80rpx;
		left: 50rpx;
		bottom: 300rpx;
		position: fixed;
		background: $uni-but-bg-color;
		box-shadow: 2rpx 4rpx 14rpx rgba(25, 143, 255, 0.4);
		border-radius: 50%;
		z-index: 11;
		display: flex;
		justify-content: center;
		align-items: center;

		.page-button-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-body {
			display: flex;
			flex-direction: column;
			height: calc(100% - 90rpx - var(--status-bar-height));
		}

		.page-top {
			border-bottom: 1rpx solid $uni-bg-color-grey;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
		}
	}
</style>
